<template>
  <div class="menu-bottom">
    <div class="menu-container">
      <div class="menu-basic padding-30-0" v-for="menu in menus" :key="menu.index" @click="menuClick(menu)">
        <img :src="actives === menu.index ? menu.activeImg : menu.img" alt="" class="menu-img" />
        <!-- <span :class="actives === menu.index ? 'menu-name-active' : 'menu-name'">{{ menu.name }}</span> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "menuBottom",
  data() {
    return {
      menus: [
        {
          index: 0,
          name: "首页",
          img: require("../../../assets/svg/menu/home-page.svg"),
          activeImg: require("../../../assets/svg/menu/home-page-active.svg"),
          routers: "/home",
        },
        {
          index: 1,
          name: "旅游指南",
          img: require("../../../assets/svg/menu/guide.svg"),
          activeImg: require("../../../assets/svg/menu/guide-active.svg"),
          routers: "/picture",
        },{
          index: 2,
          name: "三维浏览",
          img: require("../../../assets/svg/menu/browse-3d.svg"),
          activeImg: require("../../../assets/svg/menu/browse-3d-active.svg"),
          routers: "/culture",
        },
        {
          index: 3,
          name: "历史人文",
          img: require("../../../assets/svg/menu/history.svg"),
          activeImg: require("../../../assets/svg/menu/history-active.svg"),
          routers: "/audio",
        },
        {
          index: 4,
          name: "视频",
          img: require("../../../assets/svg/menu/video.svg"),
          activeImg: require("../../../assets/svg/menu/video-active.svg"),
          routers: "/video",
        },
      ],
      actives: 0,
    };
  },
  mounted() {},
  methods: {
    menuClick(e) {
      this.actives = e.index;
      this.jumpToRouter(e.routers);
    },
    jumpToRouter(e) {
      if (this.$router.currentRoute.fullPath != e) {
        this.$router.push(e);
      }
    },
  },
};
</script>